iT邦幫忙

2025 iThome 鐵人賽

DAY 18
0

select下拉式選單
select是下拉式選單的容器,選單的內容由option呈現,value代表被選擇後傳給後端的資料,若無則傳option
https://ithelp.ithome.com.tw/upload/images/20251002/20178696qSLVagjpLq.png
https://ithelp.ithome.com.tw/upload/images/20251002/20178696IGOQendphe.png
disabled:此項目不可選,不可選的默認是灰色表示
selected:默認選項
optground將選單內容分成不同的群組
用disabled和selected來模擬下拉式選單的標題
https://ithelp.ithome.com.tw/upload/images/20251002/20178696Z9o6ybVDUq.png
https://ithelp.ithome.com.tw/upload/images/20251002/201786966GLMKmdS6n.png
name:描述select選單是選什麼的
multiple:讓選單可以多選,要按住ctrl
size:選單一次顯示的數量
autofocus:自動聚焦,需搭配javascript使用
https://ithelp.ithome.com.tw/upload/images/20251002/20178696COqCOIgva5.png
https://ithelp.ithome.com.tw/upload/images/20251002/20178696ozerGKApFq.png
按鈕(button):拿來跟javascript配合用的,如點擊後能觸發什麼事件
button能塞入文字或圖片等,
https://ithelp.ithome.com.tw/upload/images/20251002/201786965uaouTZSbB.png

button{
        background-color: skyblue;
        border-color: darkblue;
        border-radius: 5px;
        color: white;
        padding: 10px 20px;
}

改了css樣式能知道按鈕的組成是什麼,按鈕默認有邊框,border-radius可以改邊框成圓角,數值越高邊框就越圓,color是按鈕內容的顏色,background-color才能改變按鈕的顏色
https://ithelp.ithome.com.tw/upload/images/20251002/20178696hgFhTyGCMY.png
border-radius: 20px
https://ithelp.ithome.com.tw/upload/images/20251002/20178696zuuftul59N.png
textarea:文字區塊,可以在裡面輸入文字

<textarea name="message" rows="10" cols="20" placeholder="在裡面輸入文字"></textarea>

name:本身沒用意,主要用來提醒這個物件的輸入是要用來做什麼的
rows:縱向可以輸入多少文字
cols:橫向可以輸入多少文字
placeholder:在未被輸入文字前顯示的,提醒要在這裡面輸入甚麼
未輸入文字前
https://ithelp.ithome.com.tw/upload/images/20251002/20178696SkvzFRltNu.png
輸入文字後placeholder就會消失
https://ithelp.ithome.com.tw/upload/images/20251002/20178696NGXN1anGRt.png


上一篇
day17Html hover
下一篇
day19Html單位
系列文
HTML&CSS30天修煉24
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言